<template>
    <a-sub-menu v-if="value.childrens && value.childrens.length > 0" :key="getJsonKey(value)">
        <template v-slot:title>
            <menu-icon :iconName="value.icon" />
            <span>{{ getDisplayName(value.code) }}</span>
        </template>
        <sub-menu-tree v-for="child in value.childrens" :key="getJsonKey(child)" :value="child" />
    </a-sub-menu>
    <a-menu-item v-else :key="getJsonKey(value)">
        <menu-icon :iconName="value.icon" />
        <span>{{ getDisplayName(value.code) }}</span>
    </a-menu-item>
</template>

<script setup lang='ts'>
import i18n from '@/i18n';
import MenuIcon from '@/components/icon/index.vue';
import { toCamelCase } from '@/utils';
import type { MenuResultDto } from '@/models/menu';

defineProps<{ value: MenuResultDto }>();

function getDisplayName(code: string): string {
    return i18n.global.t('menuTree.' + toCamelCase(code));
}

function getJsonKey(item: MenuResultDto): string {
    const json: string = JSON.stringify({
        id: item.id,
        icon: item.icon,
        code: item.code,
        parentCode: item.parentCode,
        displayName: item.displayName,
        baseMenuButton: item.baseMenuButton
    });
    return json;
}
</script>